<template>
  <div class="wrap">
    <header>
      <h3>直播管理</h3>
    </header>
    <main>
      <div class="chose">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value5" :options="option5" @change="screening5(value5)" />
        </van-dropdown-menu>
        <div class="ipt2">
          <input type="text" v-model="val" placeholder="关键字" />
          <button @click="search()">搜索</button>
        </div>
      </div>
      <div class="zhibo1">
        <div v-for="(item,index) in list" :key="index" class="zhibo2">
          <img :src="item.img" alt @click="toBoDetail(item)" />
          <div class="font">
            <p>{{item.zb}}</p>
            <p>{{item.title}}</p>
            <span>{{item.date}}</span>
          </div>
          <div class="font1">
            <span>回看</span>
            <span @click="del(item.id)">删除</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      value5: "请选择",
      option5: [
        { text: "请选择", value: "请选择" },
        { text: "直播中", value: "直播中" },
        { text: "已结束", value: "已结束" }
      ],
      val: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await axios.post("/api/search", { val: this.val });
      console.log(res);
      this.list = res.data.data;

      // axios({
      //   url: "/api/getList",
      //   method: "post"
      // }).then(res => {
      //   console.log(res);
      //   this.list = res.data.data;
      // });
    },
    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        console.log(res);
        this.getList();
      });
    },

    screening5(value) {
      axios({
        url: "/api/screening5",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.getlist();
        } else {
          this.list = res.data.data;
        }
      });
    },

    search() {
      this.getList();
    },

    toBoDetail(){
      this.$router.push('/danmu')
    }
  }
};
</script>

<style lang='scss' scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // border: 1px solid #999;
}
header {
  height: 30px;
  line-height: 30px;
  color: #999;
}
main {
  .chose {
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    margin: 15px 20px;
    van-dropdown-menu {
      display: flex;
      margin: 0 20px;
    }
    .ipt2 {
      display: flex;
      align-items: center;
      margin-left: 20px;
      input {
        border-collapse: collapse;
        width: 160px;
        height: 37px;
        border-radius: 3px;
        background: #fff;
        padding-left: 12px;
      }
      button {
        width: 80px;
        height: 37px;
        border: none;
        background: #999;
        font-size: 16px;
        border-radius: 3px;
        margin-left: 8px;
      }
    }
  }
  .zhibo1 {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 20px;

    .zhibo2 {
      img {
        width: 240px;
        height: 130px;
      }
      margin: 5px 10px;
      .font {
        p {
          font-size: 16px;
          color: #333;
        }
      }
      .font1 {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        span {
          color: blue;
          font-size: 14px;
        }
      }
    }
  }
}
</style>